<!-- 入会审核 -->
<template>
  <div class="page-container">
    入会
    <div class="table-page-search">
      <a-form>
        <a-form-item label="会员名称">
          <a-input v-model="queryParam.keyWord" placeholder="请输入会员名称" allowClear />
        </a-form-item>
        <a-form-item label="负责人姓名">
          <a-input v-model="queryParam.contactPersonName" placeholder="请输入负责人姓名" allowClear />
        </a-form-item>
        <a-form-item label="会员职务">
          <a-select v-model="queryParam.levelId" allowClear class="min-width-15">
            <a-select-option value="">全部</a-select-option>
            <a-select-option v-for="item in levelList" :key="item.id" :value="item.id"
              >{{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="用户类型">
          <a-select v-model="queryParam.applyType" placeholder="请选择用户类型" allowClear>
            <template v-for="dict in Dict.getLocal('applyTypeDict')">
              <a-select-option v-if="dict.dictValue !== 0" :key="dict.dictValue" :value="dict.dictValue">
                {{ dict.dictLabel }}
              </a-select-option>
            </template>
          </a-select>
        </a-form-item>
        <a-form-item label="审核阶段">
          <a-select v-model="queryParam.formStageId" placeholder="请选择" allowClear>
            <a-select-option v-for="item in stageList" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="审核状态">
          <a-select v-model="queryParam.auditStatus" placeholder="请选择" allowClear>
            <a-select-option v-for="dict in reviewStatusList" :key="dict.dictValue" :value="dict.dictValue">
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="申请时间">
          <a-range-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model="applyTime" class="width-25" />
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </span>
      </a-form>
    </div>
    <div class="table-operator disFlxJS">
      <div>
        <a-button v-has="'member:approval:exprot'" @click="handleExportExcel">导出</a-button>
      </div>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id, enabled, title"
      :columns="newColumns"
      :data="loadData"
      :rowSelection="null"
    >
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
      </span>
      <!-- 用户类型 -->
      <span slot="applyType" slot-scope="text, record">
        <DictTag :options="Dict.getLocal('applyTypeDict')" :value="record.applyType" isText showBorder />
      </span>
      <!-- 资料审核状态 -->
      <span slot="auditStatus" slot-scope="text">
        <DictTag :options="reviewStatusList" :value="text" />
      </span>
      <!-- 缴费情况 -->
      <span slot="paymentStatus" slot-scope="text">
        <DictTag :options="Dict.getLocal('paymentApprovalStatusDict')" :value="text" />
      </span>
      <!-- 提交人信息 -->
      <template slot="userInfo" slot-scope="text, record, index">
        <div class="disFlxAC">
          <a-avatar size="default" icon="user" :src="record.avatar" />
          <div class="_pl-10 fz-12">
            <div>{{ record.userName }}</div>
            <div>{{ record.phonenumber }}</div>
          </div>
        </div>
      </template>
      <!-- 操作 -->
      <div slot="actionFilterIcon" class="disFlxAC min-width-12">
        <CustomTable :name="$route.name + '_' + 'Join'" :columns="columns" :newColumns="newColumns" />
      </div>
      <template slot="actionFilter">
        <div></div>
      </template>
      <span slot="action" slot-scope="text, record">
        <ButtonGroup :max-length="2" :key="`${record.auditStatus}-${record.isFinish}-${record.paymentStatus}`">
          <a-button
            v-for="item in _btnList(record)"
            :key="item.text"
            type="primary"
            ghost
            size="small"
            class="width-8"
            @click="item.fn"
          >
            {{ item.text }}
          </a-button>
        </ButtonGroup>
      </span>
    </s-table>
    <DetailModal ref="detailModal" @success="handleReload" @toMemberSet="handleToMemberSet" />

    <PaySetModal ref="paySetModal" @refresh="handleReload" />
  </div>
</template>

<script>
import { STable } from '@/components'
import DetailModal from './detailModal.vue'
import PaySetModal from '@/views/member/components/modal/paySet'
import {
  memberApplypageList,
  memberApplyReview,
  customFormStage,
  memberApplyFormExportExcel
} from '@/api/member/member'
import { paymentStatusEnum } from '@/enums/member'
import CustomTable from '@/components/Cuscolumn'
import { checkPermission } from '@/utils/authority'
import DictTag from '@/components/DictTag'
import ButtonGroup from '@/components/Table/buttonGroup'
import { getList } from '@/api/member/memberType'
export default {
  components: {
    STable,
    DetailModal,
    CustomTable,
    PaySetModal,
    DictTag,
    ButtonGroup
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 10
      },
      levelList: [],
      queryParam: {
        keyWord: undefined,
        contactPersonName: undefined,
        applyType: undefined,
        formStageId: undefined,
        auditStatus: undefined,
        startTime: undefined,
        levelId: '',
        endTime: undefined
      },
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        {
          title: '用户类型',
          dataIndex: 'applyType',
          ellipsis: true,
          scopedSlots: { customRender: 'applyType' },
          width: '100px'
        },
        {
          title: '会员名称',
          dataIndex: 'proposer',
          ellipsis: true,
          width: '180px'
        },
        {
          title: '申请职务',
          dataIndex: 'levelName',
          ellipsis: true,
          width: '150px'
        },
        {
          title: '负责人姓名',
          dataIndex: 'contactPersonName',
          ellipsis: true,
          width: '150px'
        },
        {
          title: '负责人手机',
          dataIndex: 'contactPersonPhone',
          ellipsis: true,
          width: '150px'
        },
        {
          title: '所属阶段',
          dataIndex: 'stageName',
          ellipsis: true,
          width: '150px'
        },
        {
          title: '资料审核状态',
          dataIndex: 'auditStatus',
          ellipsis: true,
          scopedSlots: { customRender: 'auditStatus' },
          width: '150px'
        },
        {
          title: '缴费情况',
          dataIndex: 'paymentStatus', //1:已缴费，0:待缴费
          ellipsis: true,
          scopedSlots: { customRender: 'paymentStatus' },
          width: '150px'
        },
        {
          title: '提交人信息',
          dataIndex: 'userInfo',
          scopedSlots: { customRender: 'userInfo' },
          ellipsis: true,
          width: '250px',
          align: 'left'
        },
        {
          title: '审核人',
          dataIndex: 'auditUserName',
          ellipsis: true,
          width: '150px'
        },
        {
          title: '提交时间',
          dataIndex: 'createTime',
          ellipsis: true,
          width: '200px'
        },
        {
          title: '审核时间',
          dataIndex: 'auditTime',
          ellipsis: true,
          width: '200px'
        },
        {
          title: '操作',
          dataIndex: 'action',
          fixed: 'right',
          width: '250px',
          scopedSlots: {
            customRender: 'action',
            filterDropdown: 'actionFilter',
            filterIcon: 'actionFilterIcon'
          }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: async parameter => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize
        }
        this.listLoading = true
        return memberApplypageList(Object.assign(params, this.queryParam))
          .then(res => {
            this.listLoading = false
            if (res.code === 0) {
              this.pagination.current = parameter.pageNum
              this.pagination.pageSize = parameter.pageSize
              return res
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            this.listLoading = false
            this.$message.error(err.msg)
          })
      },
      stageList: [],
      reviewStatusList: [
        ...this.Dict.getLocal('reviewStatusDict'),
        { dictLabel: '终止审核', dictValue: 3, color: '#666666' }
      ]
    }
  },
  watch: {
    'queryParam.applyType': {
      handler(id) {
        id && this.getCustomFormStage(id)
      }
    }
  },
  computed: {
    applyTime: {
      get() {
        return [this.queryParam.startTime, this.queryParam.endTime]
      },
      set(val) {
        this.queryParam.startTime = val[0]
        this.queryParam.endTime = val[1]
      }
    },
    newColumns() {
      const currentColumns = this.$store.state.user.customTable
      if (currentColumns && currentColumns[this.$route.name + '_' + 'Join']) {
        return this.$options
          .data()
          .columns.filter(v => {
            const _items = currentColumns[this.$route.name + '_' + 'Join'].find(
              item => item === v.title || item.title === v.title
            )
            if (_items) return Object.assign(v, _items)
          })
          .sort((a, b) => {
            return a.tableSort - b.tableSort
          })
      } else {
        return this.columns
      }
    }
  },
  created() {
    this.getLevelList()
  },
  methods: {
    async getLevelList() {
      let res = await getList()
      this.levelList = res.data || []
    },
    handleReload() {
      this.$refs.table.refresh()
    },
    handleDetail(row, type) {
      this.$refs.detailModal.show(row, type)
    },
    //会员设置
    handleSet(row, type) {
      let { id, proposer, levelId, levelName, applyType } = row
      this.$refs.paySetModal.show({
        id,
        row: JSON.stringify({
          applyType,
          memberName: proposer,
          levelId,
          levelName
        }),
        type
      })
    },
    async getCustomFormStage(id) {
      let res = await customFormStage(id)
      this.stageList = res.data || []
    },
    handleReset() {
      Object.keys(this.queryParam).forEach(k => {
        this.queryParam[k] = undefined
      })
      this.queryParam.levelId = ''
      this.$refs.table.refresh(true)
    },
    async handleExportExcel() {
      await memberApplyFormExportExcel({ ...this.queryParam })
    },
    handleToMemberSet(row) {
      this.handleSet(row, 'memberSet')
    },
    _btnList(record) {
      let oldList = [
        {
          show: checkPermission('member:approval:joinDetail'),
          text: '详情',
          fn: () => this.handleDetail(record, 'detail')
        },
        {
          show: record.auditStatus === 0 && checkPermission('member:approval:joinApproval'),
          text: '审核',
          fn: () => this.handleDetail(record, 'approval')
        },
        {
          show:
            record.isFinish === 1 &&
            record.paymentStatus === paymentStatusEnum.STAY &&
            checkPermission('member:approval:dues'),
          text: record.isSetPaymenrecord ? '修改' : '会费设置',
          fn: () => this.handleSet(record, 'memberSet')
        },
        {
          show:
            record.isFinish === 1 &&
            record.paymentStatus === paymentStatusEnum.REJECT &&
            checkPermission('member:approval:join:proofApproval'),
          text: '凭证审核',
          fn: () => this.handleSet(record, 'payApproval')
        },
        {
          show:
            record.isFinish === 1 &&
            record.paymentStatus === paymentStatusEnum.END &&
            checkPermission('member:approval:proof'),
          text: '缴费信息',
          fn: () => this.handleSet(record, 'payApprovalDetail')
        }
      ]
      return oldList.filter(v => v.show)
    }
  }
}
</script>
<style scoped lang="less"></style>
